<template>
  <div class="practice">
    <Panel>
      <div class="search-input-box">
        <SearchInput
          placeholder="请输入您要搜索的内容"
          v-model="searchData.keyword"
          @search="search"
        />
      </div>
      <AppTitle icon="shixi" text="实习方向" />
      <div class="practice-tags">
        <div
          class="practice-tag"
          v-for="item in jobTags"
          :key="item"
          @click="handleTagClick(item)"
        >
          {{ item }}
        </div>
      </div>
    </Panel>
    <Panel>
      <el-row :gutter="12">
        <el-col :span="12">
          <AppTitle icon="shixibeifen" text="最新实习岗位" />
          <el-table :data="tableData1" border stripe>
            <el-table-column prop="jobName" :label="$t('job.jobName')" />
            <el-table-column prop="jobTags" :label="$t('job.jobTags')" />
            <el-table-column
              prop="companyName"
              :label="$t('job.companyName')"
              min-width="150"
            />
            <el-table-column
              prop="publishTime"
              :label="$t('job.publishTime')"
            />
            <TableColumnAction v-slot="{ scope }" width="80">
              <el-button
                type="primary"
                size="mini"
                round
                @click="
                  $router.push(
                    '/myPractice/practice/job-detail?id=' + scope.row.id
                  )
                "
                >查看</el-button
              >
            </TableColumnAction>
          </el-table>
        </el-col>
        <el-col :span="12">
          <AppTitle icon="shixibeifen" text="最新实训岗位" />
          <el-table :data="tableData2" border stripe>
            <el-table-column prop="jobName" :label="$t('job.jobName')" />
            <el-table-column prop="jobTags" :label="$t('job.jobTags')" />
            <el-table-column
              prop="companyName"
              :label="$t('job.companyName')"
              min-width="150"
            />
            <el-table-column
              prop="publishTime"
              :label="$t('job.publishTime')"
            />
            <TableColumnAction v-slot="{ scope }" width="80">
              <el-button
                type="primary"
                size="mini"
                round
                @click="
                  $router.push(
                    '/myPractice/practice/job-detail?id=' + scope.row.id
                  )
                "
                >查看</el-button
              >
            </TableColumnAction>
          </el-table>
        </el-col>
      </el-row>
      <el-pagination
        class="practice-pagination"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        :layout="pageLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </Panel>
  </div>
</template>

<script>
import { Panel, AppTitle, SearchInput, TableColumnAction } from 'components'
import { getJobTags, queryJob } from 'services/student/job'
export default {
  name: 'Practice',
  components: { Panel, AppTitle, SearchInput, TableColumnAction },
  data() {
    return {
      jobTags: [],
      searchData: {
        keyword: ''
      },
      tableData1: [],
      tableData2: [],
      loading: false,
      pageSizes: [10, 20, 50, 100],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      pageLayout: 'total, sizes, prev, pager, next, jumper'
    }
  },
  methods: {
    async initData() {
      this.jobTags = await getJobTags()
    },
    handleTagClick(item) {
      this.searchData.keyword = item
      this.search()
    },
    async search(refresh = false) {
      try {
        if (refresh) {
          this.currentPage = 1
        }
        this.loading = true
        const pageData = {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
        const data = await queryJob(this.searchData, pageData)
        this.tableData1 = data.data.data1
        this.tableData2 = data.data.data2
        this.total = data.totalElements
      } catch {
        this.clear()
      } finally {
        this.loading = false
      }
    },
    clear() {
      this.tableData1 = []
      this.tableData2 = []
      this.total = 0
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.search()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.search()
    }
  },
  created() {
    this.initData()
    this.search()
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.panel {
  margin-bottom: 0.23rem;
}
.practice {
  .search-input-box {
    display: flex;
    justify-content: center;
    padding: 0.32rem 0;
    .search-input {
      width: 5.82rem;
    }
  }
  .practice-tags {
    @include clearfix();
    padding: 0 28px;
    .practice-tag {
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
      @include flexCenter();
      width: 10%;
      min-width: 120px;
      height: 32px;
      border: 1px solid $colorPrimary;
      border-radius: 16px;
      color: $colorPrimary;
      cursor: pointer;
      &:nth-child(9) {
        margin-right: 0;
      }
      &:hover {
        background-color: $colorPrimary;
        color: #fff;
      }
    }
  }
  .practice-pagination {
    margin-top: 0.3rem;
    text-align: right;
  }
}
</style>
